<template>
  <view class="container">
    <!-- <toast></toast> -->
    <!-- <u-navbar title="村社财务管理" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <div class="content">
      <div class="cont1" @click="gotoJump('/pageContent/finance/financeDisclosure')">
        <img style="width: 144rpx; height: 144rpx" src="@/static/image/webApp/home1.png" alt="" />
        <span class="c1">财务公开</span>
      </div>
      <div v-if="appRoleArr.auditRole" class="cont1 bg2" @click="gotoJump('/pageContent/finance/financialreview')">
        <img style="width: 130rpx; height: 130rpx; margin-left: 2rpx" src="@/static/image/webApp/home2.png" alt="" />
        <span class="c2">财务审核</span>
      </div>
      <div v-if="appRoleArr.financeRole" class="cont1 bg3" @click="gotoJump('/pageContent/finance/financialCommunity')">
        <img style="width: 116rpx; height: 116rpx; margin-left: 8rpx" src="@/static/image/webApp/home3.png" alt="" />
        <span class="c3">村社财务</span>
      </div>
    </div>

    <div style="width: 100%; height: 120rpx"></div>
    <div class="footerNav">
      <div class="navTab" @click="gotoJumpTab('/pageContent/finance/content')">
        <img src="https://ncn-static.oss-cn-shanghai.aliyuncs.com/SmallApp/sz-index-se.png?version=1" alt="" />
        <span class="c3">首页</span>
      </div>
      <div class="navTab" @click="gotoJumpTab('/pageContent/finance/home')">
        <img src="https://ncn-static.oss-cn-shanghai.aliyuncs.com/SmallApp/sz-wode.png?version=1" alt="" />
        <span>我的</span>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      appRoleArr: {},
    }
  },
  onShow() {
    this.appRoleArr = JSON.parse(uni.getStorageSync('appRole') || '{}')
  },
  methods: {
    gotoJumpTab(url) {
      if (url == '/pageContent/finance/home' && !uni.getStorageSync('accesstoken')) {
        uni.navigateTo({
          url: '/pages/login/login',
        })
        return
      }
      uni.redirectTo({
        url: url,
      })
    },
    gotoJump(url) {
      uni.navigateTo({
        url: url,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  flex-wrap: wrap;
  padding: 32rpx;
  .cont1 {
    display: flex;
    align-items: center;
    width: 326rpx;
    height: 144rpx;
    background: #d9f7e5;
    border-radius: 4rpx;
    font-size: 32rpx;
    margin-bottom: 32rpx;
    margin-right: 32rpx;
    text-align: right;
    &:nth-child(2n) {
      margin-right: 0;
    }
    span {
      flex: 1;
      padding-right: 32rpx;
    }
  }
  .bg2 {
    background: #fff2e5;
  }
  .bg3 {
    background: #d8eaff;
  }
}
.c1 {
  color: #3abf70;
}
.c2 {
  color: #ed7b07;
}
.c3 {
  color: #2c83e4;
}

// 底部导航条
.footerNav {
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 120rpx;
  background: #ffffff;
  padding: 0 32rpx;
  box-shadow: 0px -2px 5px 0px rgba(0, 0, 0, 0.06);

  .navTab {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    justify-content: center;

    img {
      width: 46rpx;
      height: 46rpx;
      margin-bottom: 4rpx;
    }

    span {
      font-size: 24rpx;
    }
  }
}
</style>
